<template>
    <div class="all">
        <div style="text-align:center;font-size:28px;font-weight:bold;">{{$route.name}}</div>
        <el-page-header @back="goBack" :content="$route.name"></el-page-header>
        <div class="search"></div>
        <div class="table">
            <!-- 表格 -->
            <el-table
                :data="carTable"
                border
                height="560"
                :style="{width:screenWidth+'px'}"
                :cell-style="cellStyle"
                :header-cell-style="rowClass"
            >
                <!-- <el-table-column type="selection" width="60px"></el-table-column> -->
                <el-table-column type="index" label="序号" width="80px"></el-table-column>
                <!-- <el-table-column label="用户名" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.userName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="姓名" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.realName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="手机号" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.userPhone }}</span>
                    </template>
                </el-table-column>-->
                <el-table-column label="车牌" width="160px">
                    <!-- <template slot-scope="scope">
                        <span>{{ scope.row.carNumber }}</span>
                    </template> -->
                    <span>{{routerrow.plate_number}}</span>
                </el-table-column>
                <el-table-column label="车架号" width="180px">
                    <!-- <template slot-scope="scope">
                        <span>{{ scope.row.vin }}</span>
                    </template> -->
                    <span>{{routerrow.chassis_number}}</span>
                </el-table-column>
                <el-table-column label="车辆类型" width="160px">
                    <!-- <template slot-scope="scope">
                        <span>{{ scope.row.carType }}</span>
                    </template> -->
                    <span>{{ cartype[routerrow.type] }}</span>
                </el-table-column>
                <!-- <el-table-column label="地区" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.area }}</span>
                    </template>
                </el-table-column>-->
                <el-table-column label="到期时间" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.due_time*1000 | formatDate }} {{ scope.row.due_time*1000 | formatDateBehind }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="剩余次数" width="140px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.remain_num }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="城市" width="140px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.city }}</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="会员消费总次数" width="140px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.consumeAllCount }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="消费总金额" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.consumeAllMoney }}元</span>
                    </template>
                </el-table-column>
                <el-table-column label="充值总金额" width="120px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.topupAllMoney }}元</span>
                    </template>
                </el-table-column>
                <el-table-column label="会员" width="100px">
                    <template slot-scope="scope">
                        <span
                            style="display:block;cursor:pointer;"
                            @click="lookMember(scope.$index, scope.row)"
                        >查看</span>
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip label="备注" width="200px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.remark }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120px">
                    <template slot-scope="scope">
                        <el-button
                            size="small"
                            type="primary"
                            @click="edit(scope.$index, scope.row)"
                        >修改</el-button>
                    </template>
                </el-table-column>-->
            </el-table>

            <!-- 分页 -->
            <el-pagination
                @size-change="pageCount"
                @current-change="currentPageCount"
                :current-page="currentPage"
                :page-sizes="[100, 500,1000,1500, 2000]"
                :page-size="currentCount"
                layout="prev, pager, next, jumper, sizes,total"
                :total="pageResultSize"
            ></el-pagination>
        </div>
            <!-- 修改/查看对话框 -->
        <!-- <div>
            <el-dialog
                title="修改/查看"
                width="60%"
                :visible.sync="editVisible"
                center
                @close="closeBrowse"
            >
                <el-form :model="editPrice">
                    <el-form-item label="车牌：" :label-width="formLabelWidth">
                        <el-input v-model="editPrice.carNumber" placeholder="请输入车牌"></el-input>
                    </el-form-item>
                    <el-form-item label="车架号：" :label-width="formLabelWidth">
                        <el-input v-model="editPrice.vin" placeholder="请输入车架号"></el-input>
                    </el-form-item>
                    <el-form-item label="备注：" :label-width="formLabelWidth">
                        <el-input
                            type="textarea"
                            autosize
                            v-model="editPrice.remark"
                            placeholder="请输入备注"
                        ></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer">
                    <el-button @click="cancelModify">取 消</el-button>
                    <el-button type="primary" @click="confirmModify">确 定</el-button>
                </div>
            </el-dialog>
        </div> -->
    </div>
</template>

<script>
import "../../../../static/scss/page.scss";
import utils from "../../../util/request";
import {formatDate } from '../../../util/time.js';
export default {
    data() {
        return {
            // 分页
            currentPage: 1, //初始页面
            currentCount: 100, //当前页面的数据数量
            pageResultSize: 10, //表格数据总数
            screenWidth: window.innerWidth, //可视宽度
            editVisible: false, //修改/查看对话框
            cartype:["通用","轿车","SUV","MPV"],
            formLabelWidth: "120px", //对话框的标签宽度
            editPrice: {
                // 修改对话框
                storeId: "", //车辆id
                carNumber: "", //车牌
                vin: "", //车架号
                remark: "" //备注
            },
            // carSearch: {
            //     //搜索
            //     userName: "", //用户名
            //     userPhone: "", //手机号
            //     plateNumber: "" //车牌
            // },
            carTable: [
                {
                    carType: "小轿车", //车辆类型
                    carNumber: "粤B7CU91", //车牌
                    vin: "lfv2a2150a3043256", //车架号
                    due_time: "2020-08-13", //到期时间
                    remain_num: 3, //剩余次数
                    city: "深圳" //城市
                },
                {
                    carType: "小轿车", //车辆类型
                    carNumber: "粤B7CU91", //车牌
                    vin: "lfv2a2150a3043256", //车架号
                    due_time: "2020-08-13", //到期时间
                    remain_num: 3, //剩余次数
                    city: "广州" //城市
                },
                {
                    carType: "小轿车", //车辆类型
                    carNumber: "粤B7CU91", //车牌
                    vin: "lfv2a2150a3043256", //车架号
                    due_time: "2020-08-13", //到期时间
                    remain_num: 3, //剩余次数
                    city: "东莞" //城市
                }
            ]
        };
    },
    filters:{
        // 时间
		formatDate(time){
			var date = new Date(time);
			return formatDate(date, 'yyyy-MM-dd');
		},
		formatDateBehind(time){
			var date = new Date(time);
			return formatDate(date, 'hh:mm:ss')
		}
    },
    methods: {
        // searchClick() {
        //     // 查询
        // },
        goBack: function() {
            // 页头的返回
            this.$router.go(-1);
        },
        // lookMember(index, row) {
        //     // 查看会员
        //     console.log(index, row);
        // },
        // edit(index, row) {
        //     // 修改
        //     console.log(row);
        //     this.editVisible = true;
        //     this.editPrice.storeId = row.storeId; //车辆id
        //     this.editPrice.carNumber = row.carNumber; //车牌
        //     this.editPrice.vin = row.vin; //车架号
        //     this.editPrice.remark = row.remark; //备注
        // },
        // confirmModify() {
        //     // 确认对话框:需要手机验证
        //     this.editVisible = false;
        // },
        // cancelModify() {
        //     // 取消对话框
        //     this.editVisible = false;
        //     this.editPrice.carNumber = "";
        //     this.editPrice.vin = "";
        //     this.editPrice.remark = "";
        // },
        // closeBrowse() {
        //     // 关闭对话框
        //     this.editPrice.carNumber = "";
        //     this.editPrice.vin = "";
        //     this.editPrice.remark = "";
        // },
        //   表格居中
        cellStyle: function({ row, column, rowIndex, columnIndex }) {
            return "text-align:center;";
        },
        rowClass: function({ row, rowIndex }) {
            return "text-align:center;";
        },
        // 每页数据的数量
        pageCount: function(val) {
            this.currentCount = val;
        },
        // 点击的第几页
        currentPageCount: function(val) {
            this.currentPage = val;
        }
    },
    created() {
        this.routerrow = JSON.parse(this.$route.query.row);
        utils.request("/carMember/list","post",JSON.stringify({page:1,list_rows:9999,car_id:this.routerrow.id})).then(resp=>{
            console.log(resp)
            this.carTable = resp.data.data.data;
        })
        // if (row !== "[object Object]") {
        //     console.log(row);
        // }
    }
};
</script>




